<template>
  <div class="postComment">
    <!-- v-if="commentList.follow -->
    <span class="comment_img"
      ><img
        :src="$axios.defaults.baseURL + commentList.account.defaultAvatar"
        alt=""
    /></span>
    <span class="comment_author">{{ commentList.account.nickname }}</span>
    <span class="comment_time"> {{ getTime(commentList.created_at) }}</span>
    <PostComment
      v-if="commentList.parent"
      :commentList="commentList.parent"
      @click="handlerReply(commentList.parent)"
    />
    <!-- v-if="commentList.parent"  :commentList="commentList.parent" -->
    <div class="comment_txt" v-html="commentList.content"></div>
    <div class="img" v-for="(item, index) in commentList.pics" :key="index">
      <img :src="$axios.defaults.baseURL + item.url" alt="" />
    </div>
    <span class="type">{{ commentList.level }}</span>
    <span class="comment_answer" @click="handlerReply(commentList)">回复</span>
  </div>
</template>

<script>
export default {
  props: ["commentList"],
  name: "PostComment",
  data() {
    return {
      comments: ""
    };
  },
  methods: {
    // 通过时间戳转化成具体时间（年月日时分秒）
    getTime(timestamp) {
      var date = new Date(timestamp); //时间戳为13位的话不需乘1000,时间戳为10位需*1000，
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() + " ";
      let h = date.getHours() + ":";
      let m = date.getMinutes();
      let s = date.getSeconds();
      // console.log(Y + M + D + h + m + s);

      return Y + M + D + h + m;
    },
    handlerReply(commentList) {
      // console.log(commentList);
      this.$emit("click", commentList);
    }
  }
};
</script>

<style lang="less" scoped>
.postComment {
  position: relative;
  margin: 10px 5px;
  padding: 10px;
  border: 1px solid #ddd;

  img {
    overflow: hidden;
    width: 30px;
    height: 30px;
    vertical-align: middle;
    border: 1px solid #ccc;
    border-radius: 50%;
  }
  .comment_author {
    font-size: 14px;
  }
  .comment_time {
    color: #ccc;
    font-size: 12px;
  }
  .comment_txt {
    padding: 5px 20px;
  }
  .img > img {
    width: 100px;
    height: 100px;
    border-radius: 0;
  }
  .type {
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 12px;
    color: #ddd;
  }
  .comment_answer {
    position: absolute;
    right: 5px;
    bottom: 5px;
    font-size: 14px;
    color: #ccc;
    cursor: pointer;
    &:hover {
      color: orange;
    }
  }
}
</style>
